<template>
    <div class="singer-intro">
    <div>
    <h2>简介</h2>
<div>{{ desc }}</div>
    </div>
    <div>
        <h2>基本资料</h2>
    <div>
    <div v-for="(item, index) in basicItem" :key="index">
        <span>{{ item.key }}:</span>
        <span style="white-space: pre-wrap">{{ item.value }}</span>
    </div>
    </div>
    </div>
    <div v-for="(item, index) in otherItem" :key="index">
        <h2>{{ item.key }}</h2>
        <div style="white-space: pre-wrap">{{ item.value }}</div>
    </div>
    </div>
</template>

<script>
export default{
//通过props接受父组件传递的数据<SingerIntro singeid='id'/>
props: ["singeid"],
data() {
    return{
        desc: "",//简介传送
        basicItem: [],//基本资料
        otherItem: [],//其他（从艺经历）
    };
},
created(){
    this.getData();
},
methods:{
    getData(){
        this.$request("get","/singer/desc?singermid=" + this.singeid).then(
            (res) => {
                console.log(res);
                this.desc = res.data.desc;//获取歌手的描述
                this.basicItem = res.data.basic.item;//歌手的基本资料
                this.otherItem = res.data.other.item;//获取歌手的其他资料
            }
        );
    },
}
};    
</script>
<style scoped>
.Singer-intro {
    text-align: left;
    padding: 0 1rem;
}
</style>
